<template>
  <div>
    <!--
        to: 点击之后，跳转的地址
        tag: 渲染的标签
        传参
       -->
    <!--    <router-link to="/axios" tag="div">网络请求</router-link>-->
<!--    <router-link :to="{-->
<!--      path: '/axios',-->
<!--      query:{name:'张三',body:'你好'}-->
<!--    }" tag="div">网络请求-->
<!--    </router-link>-->

    <router-link to="/axios?name=张三" tag="div">网络请求</router-link>

    <!--增删+隔行换色-->
    <div>
      <div>
        <label for="id">id</label>
        <input type="text" v-model="addObj.id">
      </div>
      <div>
        <label for="name">姓名</label>
        <input type="text" v-model="addObj.name">
      </div>
      <div>
        <label for="id">年龄</label>
        <input type="text" v-model="addObj.age">
      </div>
      <button @click="add">添加</button>
    </div>
    <div>
      <input type="text" v-model="keywords">
    </div>
    <div>
      <table>
        <thead>
        <tr>
          <th>id</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
        </thead>
      </table>
      <tbody>
      <tr v-for="(item,index) in getList()" :key="index" :class="getClass(index)">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="del(item.id)">删除</button>
        </td>
      </tr>
      </tbody>
    </div>
  </div>
</template>

<script>
//增加搜索框
// 1. 有一个地方需要获取搜索用到的关键字
// 2. 根据关键字进行筛选操作，从数组中筛选出来符合条件的内容（名字包括这个关键字）
// 3. 把搜索的结果渲染到界面上
export default {
  name: "StudentList",
  data() {
    return {
      // 用户搜索的关键字
      keywords: "",
      addObj: {
        id: "",
        name: "",
        age: ""
      },
      list: [
        {id: 1, name: "张三", age: 19},
        {id: 2, name: "李四", age: 43},
        {id: 3, name: "王五", age: 52},
        {id: 4, name: "赵六", age: 99},
        {id: 5, name: "离奇", age: 18},
      ]
    }
  },
  methods: {
    getList() {
      // return this.list.filter(item => {
      //   return item.name.includes(this.keywords)
      // })
      return this.list.filter(item => item.name.includes(this.keywords))
    },
    add() {
      // JS对象的深度拷贝
      // this.list.push({
      //   id:this.addObj.id,
      //   name:this.addObj.name,
      //   age:this.addObj.age,
      // })
      // this.list.push({
      //   // 对象解构，相当于直接把对象的属性放在这里
      //   ...this.addObj,
      // })
      // 第三种方式
      this.list.push(JSON.parse(JSON.stringify(this.addObj)));
      // 跳转到一个页面
      // 参数和router-link中的to的参数一样
      this.$router.push("/axios")
      // this.$router.push({
      //   path:"axios",
      //   query:{
      //     name:"测试"
      //   }
      // })
      // 返回上一个页面
      this.$router.back()
      // 替换当前的页面为axios，这种跳转无法返回
      // this.$router.replace("/axios")
    },
    // 根据id删除
    // del(index) {
    //   this.list.splice(index, 1);
    // },
    del(id) {
      // 删除的API ： splice()
      // 1. 需要知道这个id对应元素的索引
      // 怎么获取这个id对应元素的索引
      // this.list.forEach((item,index) =>{
      //   if (item.id === id){
      //     console.log(index)
      //     this.list.splice(index,1)
      //   }
      // })
      // 通过find找到这个元素
      // let selectItem = this.list.find(item => item.id === id);
      // this.list.splice(this.list.indexOf(selectItem), 1);
      //   ====  > findIndex用法和find一样，返回的索引
      let index = this.list.findIndex(item => item.id === id);
      this.list.splice(index, 1);
    },
    getClass(index) {
      if (index % 2 === 0) {
        return "color1"
      } else {
        return "color2"
      }
    }
  }
}
</script>

<style scoped>
.color1 {
  background-color: lightblue;
}

.color2 {
  background-color: lightcoral;
}
</style>
